<template>
    <div class="">
        <ProdItem itemClass="prod-item-box-50" :titleName="titleName">
            <template #WeeksReport>
                <TeCarts _h="28rem" :echartsName="props.echartsName" :optionsData="optionsData" />
            </template>
        </ProdItem>
    </div>
</template>
<script setup>
import { ref } from "vue"
import ProdItem from "@/components/prodItem/index.vue"
import TeCarts from "@/components/TEcharts/index.vue"
import * as echarts from "echarts";
const props = defineProps({
  echartsName:{
    type:String,
    default:"echartsStressEcherts"
  },
  titleName:{
    type:String,
    default:""
  }
})
let echartsBox = echarts
const shijiekeList = ref([
    {
        id: 1,
        title: "开始位置",
        value: "58H",
        color: ""
    },
    {
        id: 2,
        title: "真空度",
        value: "58H",
        color: ""
    }
])
const optionsData = ref(
    {
        color: ['rgba(105, 193, 255, 1)'],
        title: {
            text: "负压kPa",
            left: "center",
            bottom: "5%",
            textStyle: {
                color: "#8FABBF",
                fontWeight: "normal",
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '8%',
            bottom: '15%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['0', '50', '100', '150', '200', '300', '400'],
                axisTick: {
                    alignWithLabel: true
                },
                "axisLine": {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    "show": true
                },
                axisTick: {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                nameTextStyle: {
                    color: "rgba(255, 255, 255, 1)"
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'slod',
                        color: ['rgba(255,255,255,.5)']
                    }
                },
            }
        ],
        yAxis: [
            {
                name: '(次数)',
                nameLocation:'center',
                nameGap:30,
                "axisLine": {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    "show": true
                },
                axisTick: {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                nameTextStyle: {
                    color: "rgba(255, 255, 255, 1)"
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: ['rgba(255,255,255,.1)']
                    }
                },
                position: 'right',
            },
            {
                "axisLine": {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {
                    "show": true
                },
                "axisTick": {
                    "show": false
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                nameTextStyle: {
                    color: "rgba(255, 255, 255, 1)"
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: ['rgba(255,255,255,.1)']
                    }
                }

            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'line',
                barWidth: '40%',
                data: [1, 3, 2, 3, 4, 2, 1],
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
            }
        ],
    }
)

</script>
<style lang="scss" scoped></style>
  